<template>
	<view class="page">
		<view class="content">
			<!-- 头部 -->
			<view class="content-left">
				<image class="img" src="../../static/orders/left.png" mode="" @click="back "></image>
				<view class="title"> 抽奖 </view>
				<swiper class="content-swiper" autoplay='true' vertical='true' circular='true' duration=1000>
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="content-swiper-item">
							<view class="">
								{{item}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 转盘 -->
			<view class="">
				<turntable :prizeList="content.probability" :prizeIndex="prizeIndex" @reset-index="prizeIndex = -1"
					@draw-before="handleDrawBefore" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
					@finish="handleDrawFinish" ref="turntable1" />
			</view>
			<!-- 次数 -->
			<!-- content.residue_degree.toString().length== -->
			<view class="number" :style="{'width':isWith}">
				<text>剩余次数</text>
				<view class=""> {{content.residue_degree||0}} </view>
			</view>
			<view :class="['btn' ]" @click="onbtn()" hover-class="active">
			</view>
			<!-- 距离结束 -->
			<view class="timer">
				<image class="img" src="../../static/lottery/timer.png" mode=""></image>
				<text>距离结束还有 {{content.day||0}} 天</text>
			</view>
			<view class="tip"> 活动结束抽奖次数将清空，请尽快使用！ </view>
			<view class="footbg">
				<view class="roul">
					<view class=""> 规则说明 </view>
					<text> 活动期间每完成一笔工作时长 ≥ <text>{{content.lotteryHours||0}}小时</text> 订单，即可获得 <text>1次</text> 抽奖机会
					</text>
					<text> 获得奖励金额实时到账至钱包 </text>
				</view>
			</view>
		</view>
		<!--  -->
		<!--   -->
		<swiperList @onClose='onClose' :monery='monery' v-if="showSwiper" />
	</view>
</template>
<script>
	import turntable from './components/turntable.vue'
	import swiperList from './components/swiperList.vue'
	export default {
		components: {
			turntable,
			swiperList,
		},
		name: 'orders',
		data() {
			return {
				sharePageUrl: '',
				code: '',
				prizeIndex: -1, // 中奖下标
				isShow: false,
				content: {
					probability: [],
					residue_degree: 0
				}, //全部数据
				list: ['用户-1***** 获得88元奖励', '用户-2***** 获得188元奖励', '用户-13***** 获得1元奖励', '用户-11***** 获得0.01元奖励',
					'用户-13***** 获得1元奖励', '用户-14***** 获得1元奖励', '用户-11***** 获得0.01元奖励',
				],
				showSwiper: false,
				id: -1,
				monery: 0,
				isEnde: true,
				timer: null
			}
		},
		onLoad() {
			this.participated_lottery()
		},
		computed: {
			isWith() {
				try {
					if (!this.content.residue_degree) {
						return '202rpx'
					} else {
						let num = 202
						for (let i = 0; i < this.content.residue_degree.toString().length; i++) {
							num += 18
						}
						return num + 'rpx'
					}
				} catch (e) {}
			}
		},
		deactivated() {
			clearTimeout(this.timer)
		},
		methods: {
			// 关闭
			onClose() {
				this.showSwiper = false
			},
			// 本次抽奖开始之前
			handleDrawStart(callback) {
				// 这里需要处理你抽奖之前的逻辑
				// 请查看示例项目中的代码
				// 必须调用 callback 并传递一个布尔值，布尔值为 true 时，转盘才会开始旋转
				callback(flag = true)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				this.showSwiper = true
				// 请查看示例项目中的代码
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				// 抽奖转盘准备就绪后，这里处理你的逻辑
				// 请查看示例项目中的代码
			},
			// 点击之前就知道结果了
			handleDrawBefore() {
				if (this.$refs.turntable1.isRotate) {
					uni.showToast({
						icon: 'none',
						title: '正在抽奖中.'
					})
					return
				}
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
			// 开始按钮
			onbtn() {
				if (this.$refs.turntable1.isRotate) {
					uni.showToast({
						icon: 'none',
						title: '正在抽奖中.'
					})
					return
				}
				if (this.content.residue_degree > 0) {
					this.content.residue_degree = this.content.residue_degree - 1
					this.$fetch(this.$api.lottery_draw, {
						id: this.id
					}, 'POST').then(res => {
						if (res.code) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.timer = setTimeout(() => {
								this.back()
								clearTimeout(this.timer)
							}, 3000)
							return
						}
						try {
							let index = this.content.probability.findIndex(v => v.id == res.data)
							this.monery = `${ (this.content.probability[index].money) / 100}`
							console.log(index, this.content.probability)
							this.prizeIndex = index
						} catch (e) {
							//TODO handle the exception
						}
					})
					this.$refs.turntable1.handleActionStart()
				} else {
					this.content.residue_degree = 0
					this.prizeIndex = -1
					uni.showToast({
						title: '没有次数了',
						icon: 'none'
					})
				}
			},
			//是否参加抽奖
			participated_lottery() {
				this.$fetch(this.$api.query_participated_lottery, {
					region: uni.getStorageSync('region1').slice(0, 6) || 330782
				}, 'POST').then(res => {
					let {
						code,
						msg,
						data
					} = res
					if (code) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						let arr = [0.01, 1, 5, 8, 88, 188]
						for (let v of arr) {
							this.content.probability.push({
								'prizeName': `${v}元`,
								'prizeImage': require(`../../static/lottery/${v}.png`),
								'prizeId': v,
							})
						}
						this.timer = setTimeout(() => {
							this.back()
							clearTimeout(this.timer)
						}, 3000)
						return
					}
					this.content = data
					this.id = data.id //活动id
					try {
						this.content.probability = data.probability.map((v, i) => {
							let png = 0
							let monery = v.money / 100
							if (monery >= 500) {
								png = 588
							} else if (monery >= 200 && monery < 499) {
								png = 288
							} else if (monery >= 100 && monery < 199) {
								png = 188
							} else if (monery >= 50 && monery < 99) {
								png = 88
							} else if (monery >= 6 && monery < 49) {
								png = 8
							} else if (monery >= 1.01 && monery < 5.99) {
								png = 5
							} else if (monery >= 0.5 && monery <= 1) {
								png = 1
							} else if (monery >= 0.02 && monery < 0.49) {
								png = 0.1
							} else if (monery <= 0.01) {
								png = 0.01
							}
							v['prizeName'] = `${ v.money / 100}元`
							v['prizeImage'] = require(`../../static/lottery/${png}.png`)
							v['prizeId'] = i
							return v
						})
					} catch (e) {
						//TODO handle the exception
					}
				}).finally(e => {
					uni.hideLoading()
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 2150rpx;
		margin-top: -34rpx;
		overflow-x: hidden;
		background: #FEDEAB url('../../static/lottery/bg.png') center 0/100% no-repeat;
	}

	.content {
		width: 100%;
		border: 1rpx solid transparent;
		display: flex;
		margin-top: 32rpx;
		flex-direction: column;

		&-left {
			display: flex;
			padding-top: 45rpx;
			align-items: center;

			.title {
				font-size: 38rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 286rpx;
				text-wrap: nowrap;
			}

			&>.img {
				width: 40rpx;
				height: 40rpx;
				margin-left: 26rpx;
			}
		}

		&-swiper {
			display: flex;
			height: 50rpx;
			width: 304rpx;
			background: linear-gradient(86deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 37%, rgba(0, 0, 0, 0.6) 100%);
			margin-top: 101rpx;
			margin-left: auto;
			text-align: center;

			&-item {
				font-size: 20rpx;
				width: 100%;
				height: 100%;
				position: absolute;
				display: flex;
				align-items: center;
				color: #fff;
			}
		}
	}

	.content-swiper {
		margin-top: 0;
		text-align: center;
	}

	.content-left {
		position: fixed;
		top: 30rpx;
		display: flex;
		width: 100%;
		z-index: 10;
	}

	// 次数
	.number {
		display: flex;
		background: #F8D696;
		box-shadow: inset 0rpx 2rpx 4rpx 2rpx rgba(254, 175, 115, 1);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 80rpx;
		align-items: center;
		margin-left: 86rpx;
		box-sizing: border-box;
		justify-content: space-between;

		&>text {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #C45828;
			margin-left: 15rpx;
			flex-shrink: 0;
		}

		&>view {
			font-size: 32rpx;
			font-weight: bold;
			color: #C45828;
			padding: 0 20rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF6B59;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			height: 60rpx;
			margin-right: 15rpx;
		}
	}

	.btn {
		width: 606rpx;
		height: 144rpx;
		margin: -1rpx auto 24rpx;
		background: url('../../static/lottery/btn1.png') center center/100% no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.08s ease-out;
	}

	.active {
		background: url('../../static/lottery/btn.png') center center/100% no-repeat;
	}

	.timer {
		width: 606rpx;
		height: 96rpx;
		background: #F9DCAB;
		box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(255, 255, 255, 1), inset 0rpx 2rpx 4rpx 2rpx rgba(255, 153, 19, 0.98);
		border-radius: 20rpx;
		opacity: 1;
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.img {
			height: 40rpx;
			width: 40rpx;
			margin-right: 12rpx;
		}
	}

	.tip {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #844015;
		line-height: 0rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.footbg {
		width: 100%;
		height: auto;
		background: #FEDEAB;
		display: flex;
		justify-content: center;
		margin-top: 78rpx;

		.roul {
			width: 694rpx;
			height: 254rpx;
			background: #FCF5DC;
			border-radius: 36rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 26rpx;

			&>view {
				width: 192rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #FAEACC 0%, #FFE194 100%);
				border-radius: 0rpx 0rpx 30rpx 30rpx;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #C45828;
				align-self: center;
				margin-bottom: 30rpx;
			}

			&>text {
				display: flex;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #844015;
				line-height: 42rpx;
				width: 628rpx;
				margin: 0 auto;

				&>text {
					color: rgba(132, 64, 21, 1);
					font-weight: bold;
				}
			}

			&>text::before {
				content: '';
				width: 14rpx;
				min-width: 14rpx;
				height: 14rpx;
				background: #844015;
				border-radius: 50%;
				margin: 12rpx 20rpx 0 32rpx;
			}
		}
	}
</style>